<template>
  <el-dialog title="收货地址" :visible="visible" @open="opendialog" @close="offdialog">
    <div class="spans">
      <span>
        设备编号：
        系统自动生成
      </span>
    </div>
    <el-form
      ref="addformmm"
      :rules="rules"
      :model="addnewcont"
      label-width="auto"
      label-position="left"
    >
      <el-form-item label="选择型号" prop="vmType">
        <el-select v-model="addnewcont.vmType" placeholder="请选择型号">
          <el-option
            v-for="item in modeldata"
            :key="item.typeId"
            :label="item.name"
            :value="item.typeId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择点位" prop="nodeId">
        <el-select v-model="addnewcont.nodeId" placeholder="请选择点位">
          <el-option
            v-for="item in positiondata"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button>取 消</el-button>
      <el-button type="primary" @click="addbtn">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
// const arr = [1, 2, 3]
import { getvmmodel, getvmposition, getnewvending } from '@/api/vm'

export default {
  name: 'EmperorKedeAddvmdialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      addnewcont: {
        vmType: '',
        nodeId: '',
        createUserId: 1
      },
      addvmparamsss: {}, // 要在新增表单上面 ：model 的数据
      addmodelparams: {
        pageIndex: 1,
        pageSize: 100000,
        status: null,
        innerCode: null
      },
      // 设备点位的对应参数
      addpositionparams: {
        pageIndex: 1,
        pageSize: 100000,
        name: null,
        regionId: null
      },
      // 型号数据
      modeldata: [],
      // 点位数据
      positiondata: [],
      // 规则
      rules: {
        vmType: [{ required: true, message: '必须填写哦', trigger: 'blur' }],
        nodeId: [{ required: true, message: '必须填写哦', trigger: 'blur' }]
      }
    }
  },
  created () {
    // console.log(this.visible)
  },
  mounted () {
    // console.log(this.addmodel)
  },

  methods: {
    // 点击后获取下拉框数据
    async opendialog () {
      // 调用接口
      const res1 = await getvmmodel(this.addmodelparams)
      // console.log(res1)
      this.modeldata = res1.data.currentPageRecords
      const res2 = await getvmposition(this.addmodelparams)
      // console.log(res2)
      this.positiondata = res2.data.currentPageRecords
      //
      console.log(this.addvmparamsss)
      console.log(this.modeldata)
      console.log(this.positiondata)
    },
    // 点击确定提交
    async addbtn () {
      await this.$refs.addformmm.validate() // 等待表单校验回调
      await getnewvending(this.addnewcont)
      // const res = await getnewvending(this.addnewcont)
      // console.log(res.data)// 可以看到data里面的true 说明成功了
      // 然后清空表单数据  关闭弹窗 通知父组件可以刷新数据
      this.offdialog()
      // 关闭弹窗
      // this.visible = false
      // 通知父组件
      this.$emit('updataList')
    },
    // 关闭前的回调
    offdialog () {
      // 清空表单数据
      this.$refs.addformmm.resetFields()
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-dialog {
  width: 33%;
}

</style>
